@charset "UTF-8";

@media all and (min-width: 768px) {
.pc {
display: block;
}
.sp {
display: none;
}
.bgimg {
background-position: right 20px top 20px;
background-repeat: no-repeat;
}
	
/*MV*/
.mv{
background-color: #ececec;
}
.mv .pc img{
margin-bottom: 0;
max-height: 700px;
display: block;
}
.sec-fv_front{
margin-top: auto;
margin-bottom: 0;
}
.sec-fv_front h1 {
position: absolute;
left: 50px;
width: 25%;
max-width: 420px;
bottom: 10px;
}
.mv-conv{
position: absolute;
right: 50px;
width: 35%;
bottom: 30px;
}


/*problem*/
.problem {
padding: 70px 5%;
}	
.problem .fukidashi-box{
border-radius:30px;
padding: 30px;
}	
.problem h2{
margin-bottom: 60px;
}	
.problem h3{
font-size: 22px;
margin-bottom: 30px;
}
.problem h3 span{
font-size: 28px;
}	
.flex-problem .problem-icon{
width: 90px;
}	
.flex-problem .balloon-left{
width: calc(100% - 100px);
display: flex;
}	
.problem .pc-flex-box{
display: flex;
column-gap: 50px;
}
.fukidashi-box{
margin-bottom: 50px;
}
.problem .pc-flex-box-end{
width: calc(50% - 25px);
margin: auto;
}
.arrow{
margin-top: 100px;
margin-bottom: 60px;
}
.problem .fukidashi-box h3{
margin-bottom: 30px;
}
.negative{
margin: auto auto 70px auto;
}

/*case*/
.case-box{
border-radius: 30px;
padding: 50px;
margin-bottom: 40px;
display: flex;
}
.case .img img {
margin-bottom: 0;
}	
.case .txt {
margin-left: 50px;
width:65%;
}
.case .num {
font-size: 20px;
}
.case h3 {
font-size: 30px;
}
.case01{
background-image: url("../images/case01-img.png");
}
.case02{
background-image: url("../images/case02-img.png");
}
.case03{
background-image: url("../images/case03-img.png");
}
.case04{
background-image: url("../images/case04-img.png");
}

/*solution*/
.solution{
padding: 70px;
}
.solution img{
width: 670px;
margin-left: 120px;
}

/*merit*/
.merit {
padding: 50px 5%;
}
.merit h2{
font-size: 32px;
line-height: 1.8;
margin-bottom: 50px;
}
.merit h2 span{
font-size: 44px;
}
.merit-box{
border-radius: 30px;
padding: 50px;
margin-bottom: 40px;
display: flex;
}
.merit .img img {
margin-bottom: 0;
}	
.merit .txt {
margin-left: 50px;
width:65%;
}
.merit .subtit {
font-size: 20px;
}
.merit h3 {
font-size: 30px;
}
.merit01{
background-image: url("../images/merit01-img.png");
}
.merit02{
background-image: url("../images/merit02-img.png");
}
.merit03{
background-image: url("../images/merit03-img.png");
}
.merit04{
background-image: url("../images/merit04-img.png");
}

/*guarantee*/
.guarantee{
padding: 70px;
}
	
/*health*/
.health-flex{
display: flex;
column-gap: 20px;
}
.health-flex .d-box{
width: 100%;
}
.d-box{
padding: 10px 10px 30px 10px;
}
.health-cont-box h3 {
font-size: 24px;
border-radius:50px;
padding: 12px;
margin-bottom: 20px;
}	
.ora-gre-box{
display: flex;
column-gap: 50px;
}
.health-cont-box {
margin-bottom: 40px;
}	
.blue-box{
width: calc(50% - 15px);
margin: auto;
}
	
/*life*/
.life .orange{
width: 65%;
}
	
/*conv*/
.bnr-box{
display: flex;
}
.cont-conv{
padding: 50px;
}
.cont-conv-box .tit{
margin-bottom: 15px;
margin-left:100px;
margin-top:30px; 
}
.cont-conv-box .bnr{
margin-left: 5%;
}
.cont-conv-btn{
display: flex;
width: 720px;
margin: auto;
}
.cont-conv-btn .tel-btn a,.cont-conv-btn .conv-btn a{
width: 350px;
height: 72px;
border-radius:36px;
flex-shrink: 0;
}
.cont-conv-btn .tel-btn img,.cont-conv-btn .conv-btn img{
width: 270px;
}
.cont-conv-btn .conv-btn a{
padding-top: 10px;
}
.cont-conv-btn .tel-btn a{
padding-top: 18px;
margin-right: 20px;
}

/*trial*/
.trial{
padding: 70px 20px;
}
.trial h2 {
margin-bottom: 50px;
}
.trial .trial-box{
width: 100%;
padding: 15px;
}
.trial h3 {
font-size: 18px;
}
.trial h3 span {
font-size: 28px;
}
.trial .txt {
margin: auto 15px;
}
.trial .pc-flex-box{
display: flex;
column-gap: 20px;
}
.trial .pc-flex-box-end{
display: flex;
column-gap: 20px;
max-width: 66%;
margin: auto;
}
.trial .space{
margin-bottom: 5.5vh;
}

/*oticon*/
.oticon h2 {
font-size: 42px;
margin-bottom: 30px;
}
.oticon .table-area {
overflow-x: auto;
width: 100%;
}
table.oticon_table, .oticon_table td, .oticon_table th {
font-size: 16px;
}
.oticon .txt{
margin-bottom: 70px;
}

/*flow*/
.flow{
padding: 70px 20px;
}
.flow h2{
font-size: 42px;
margin-bottom: 30px;
}
.flow .txt{
font-size: 18px;
text-align: center;
}
.flow-cont .tit-img img{
height: 100px;
margin-bottom: 20px;
}
.flow h3{
font-size: 24px;
}
.flow-cont-box {
margin-top: 30px;
border-radius:30px;
padding: 5%;
width: 100%;
}
.flow-cont-box .step-box {
align-items: center;
gap: 15px;
margin-top: 20px;
}
.flow-cont-box .step-icon {
width: 60px;
}
.flow-cont{
display: flex;
column-gap: 50px;
}
	
/*freeflow*/
.freeflow{
padding: 70px 15px;
}
.freeflow h2{
font-size: 42px;
margin-bottom: 30px;
}
.freeflow-cont-box{
padding: 30px;
margin-top: 25px;
}
.freeflow-cont-box .step-icon {
width: auto;
margin: auto 10px;
}
.freeflow-cont-box h3 {
font-size: 24px;
text-align: left;
margin-top: 0;
margin-bottom: 10px;
}
.freeflow-step-box {
display: flex;
align-items: center;
gap: 20px;
}
	
/*form*/
.form{
padding: 70px 15px;
}
.form h2{
font-size: 42px;
margin-bottom: 30px;
}
.form-cont-box{
padding: 5%;
margin-top: 25px;
border-radius:30px;
}	

/*faq*/
.faq{
padding: 70px 15px;
}
.faq h2{
font-size: 42px;
margin-bottom: 30px;
}
.fukidashi-faq {
position: relative;
display: block;
margin: auto;
padding: 20px 10px;
font-size: 24px;
}
.qa-list dl {
margin-top: 20px;
padding: 30px 50px;
font-size: 18px;
}
.qa-list dl dt::before {
font-size: 32px;
}
.qa-list dl::before {
top: 40px;
right: 25px;
}
.qa-list dl dt {
padding: 0 30px 0 60px;
}
.qa-list dl dd {
margin: 30px 0 0;
padding: 0 30px 0 60px;
font-size: 16px;
}
.faq-box .mt{
margin-top: 45px;
}

/*footer*/
footer{
padding: 30px 15px 100px 15px;
}
}


@media all and (min-width: 1000px) {
/*header*/
.sp-btn-none {
display: block;
}
header{
height: 80px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
header .logo img {
height: auto;
position: absolute;
left: 10px;
top: 3px;
width: 359px;
}
header .conv{
position: absolute;
right: 15px;
top: 15px;
}
.flex{
display: flex;
}	
.mv-conv{
display: flex;
gap: 10px;
width: 640px;
right: 5%;
bottom: 60px;
}
.mv-tel-btn a{
width:280px;
height:64px;
margin-right: 10px;
border-radius:35px;
display: block;
text-align: center;
border: #FA6225 2px solid;
padding-top: 3px;
background: #fff;
}
.mv-conv-btn a{
width:280px;
height:64px;
margin-right: 10px;
border-radius:35px;
display: block;
text-align: center;
background: #FA6225;
padding-top: 13px;
margin-bottom: 10px;
}
.mv-tel-btn img{
width: 212px;
}
.mv-conv-btn img{
width: 232px;
}

}


@media all and (min-width: 1200px) {
.mv-conv{
display: flex;
gap: 20px;
width: 640px;
left:500px;
bottom: 60px;
}
	
}